<template>
	<view class="content">

		<!-- 导航(推荐搜索)模块  start -->
		<view class="navTitle">

			<view class="navTitle-item" v-for="(item, index) in navtitle" :key="index" @tap="navtitleTo(index)">
				<view class="navTitle-item-list" :class="{'navTitle-item-active': currentIndex === index}">
					<view class="navTitle-item-title">{{item}}</view>
				</view>

			</view>

		</view>
		<!-- 导航(推荐搜索)模块  end -->

		<!-- 推荐模块 start -->
		<view class="content-recommend" v-if="currentIndex == 0">

			<view class="content-item" v-for="(item, index) in navIcon" :key="index">

				<view class="content-recommend-item" v-for="(navItem, index) in item" :key="index"
					@tap="goRecommend(navItem.title)">
					<view class="content-recommend-item-iocn" :style="{backgroundColor: navItem.styleBack}">
						<image :src="navItem.imageIcon" mode=""></image>
					</view>
					<view class="content-recommend-item-title">{{navItem.title}}</view>
				</view>

			</view>

		</view>
		<!-- 推荐模块 end -->

		<!-- 搜索模块 start -->
		<view class="container" v-if="currentIndex == 1">

			<view class="search">
				<uni-search-bar :radius="50" bgColor="white" @confirm="search" @input="input" placeholder="请输入关键字">
				</uni-search-bar>
			</view>


			<view class="container-photo">
				<view class="photo" v-for="(item, index) in imgUrlArr" :key="index">

					<view class="photo-item" v-for="(item2, index2) in item" :key="index2">

						<view class="photo-item-list">
							<image :src=" imgBaseUrl + item2.mimgUrl "></image>
						</view>

					</view>

				</view>
			</view>

		</view>
		<!-- 搜索模块 end -->

	</view>
</template>

<script>
	//提升this的作用域
	let _self
	export default {
		data() {
			return {
				navtitle: ['推荐', '搜索'],
				currentIndex: 0,
				imgBaseUrl: '',
				imgUrlArr: [],
				navIcon: [{
						navicon1: {
							styleBack: '#7a73ee',
							imageIcon: '../../static/icon/skirt.png',
							title: '约会'
						},
						navicon2: {
							styleBack: '#fc8462',
							imageIcon: '../../static/icon/canteen.png',
							title: '运动'
						}
					},
					{
						navicon1: {
							styleBack: '#27a8c7',
							imageIcon: '../../static/icon/work.png',
							title: '办公室'
						},
						navicon2: {
							styleBack: '#4b7eb6',
							imageIcon: '../../static/icon/moon.png',
							title: '夜晚户外'
						}
					},
					{
						navicon1: {
							styleBack: '#5698c7',
							imageIcon: '../../static/icon/cloud.png',
							title: '阴天户外'
						},
						navicon2: {
							styleBack: '#fba635',
							imageIcon: '../../static/icon/sun.png',
							title: '晴天户外'
						}
					}
				]
			}
		},
		onLoad() {
			_self = this
			_self.imgBaseUrl = _self.$api.IMG_SERVER_BASE
		},
		methods: {

			// 跳转到推荐衣服页面
			goRecommend(title) {
				uni.navigateTo({
					url: `../recommend/recommend?name=${title}&id=${1}`
				})
			},

			// 导航栏(推荐搜索)跳转
			navtitleTo(index) {
				_self.currentIndex = index
			},

			//监听输入框的变化
			input() {},

			//输入完毕之后，按确定按钮后，执行的方法
			search(searchValue) {
				_self.$get(_self.$api.GET_PAGINATION_LIKE_IMG + searchValue.value).then((res) => {
					console.log(res)
					if (res.code === 200 && res.content.length != 0) {
						this.imgUrlArr = res.content
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				})
			},

			go() {
				uni.navigateTo({
					url: '../login/login'
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 750rpx;
		height: 100vh;
		padding-top: 30rpx;
		padding-bottom: 500rpx;
		background-color: #f8f9fb;

		.navTitle {
			display: flex;
			position: fixed;
			top: 0;
			left: 0;
			width: 750rpx;
			padding-top: 40rpx;
			background-color: #f8f9fb;
			z-index: 9;
			box-shadow: 0rpx 5rpx 3rpx 2rpx rgba(0, 0, 0, .04);

			.navTitle-item {
				width: 50%;
				padding: 0 50rpx 0;
				display: flex;
				justify-content: space-around;

				.navTitle-item-list {
					height: 88rpx;
					line-height: 100rpx;

					.navTitle-item-title {
						font-size: 38rpx;
					}
				}
			}

			.navTitle-item-active {
				border-bottom: 8rpx solid #33a69e;
				color: #33a69e;
			}
		}

		.content-recommend {
			padding-top: 50rpx;

			.content-item {
				margin: 200rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.content-recommend-item {
					color: black;
					display: flex;
					align-items: center;
					flex-direction: column;

					.content-recommend-item-iocn {
						display: flex;
						align-items: center;
						justify-content: space-around;
						width: 210rpx;
						height: 210rpx;
						border-radius: 50%;
						margin-bottom: 30rpx;
						box-shadow: -5rpx -30rpx 50rpx 5rpx rgba(255, 255, 255, .4) inset;

						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
			}
		}

		.container {
			width: 750rpx;
			height: 100vh;
			padding-top: 120rpx;
			padding-bottom: 300rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;

			.search {
				width: 50%;
				margin-bottom: 20rpx;
			}

			.container-photo {

				width: 750rpx;
				height: 100vh;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;

				.photo {
					.photo-item {
						image {
							width: 540rpx;
							height: 720rpx;
							border-radius: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
